<template>
	<view class="search-box fboxRow Ycenter">
		<view class="search-inner fboxRow Ycenter">
			<view class="input fboxRow Ycenter flex1">
				<u-icon name="search" size="18"></u-icon>
				<input class="uni-input flex1" type="text" v-model="_keywords" confirm-type="search" :placeholder="placeholder" 
				placeholder-style="color:#6B707C;font-size: 26rpx" @input="input" @confirm="confirm" />
				<u-icon v-if="_keywords" @click="delSearch" name="close-circle" size="16"></u-icon>
			</view>
			<view class="btn fboxRow Ycenter Xcenter font26" v-if="isBtn" @click="search">搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'search-input',
		props: {
			keywords:{
				type: String,
				default:''
			},
			isBtn: {
				type: Boolean,
				default: true
			},
			placeholder:{
				type: String,
				default:'搜索'
			},
		},
		data() {
			return {};
		},
		computed: {
			_keywords: {
				get() {
					return this.keywords
				},
				set(val) {
					this.$emit('update:keywords', val)
				}
			}
		},
		methods: {
			input(e){
				if(e.detail.value != this._keywords){
					this.$emit('input',this._keywords)
				}
			},
			confirm(){
				this.$emit('confirm',this._keywords)
			},
			search(){
				this.$emit('search',this._keywords)
			},
			delSearch(){
				this._keywords = ''
				this.$emit('del')
			}
		}
	};
</script>

<style lang="scss" scoped>
.search-inner{ position: relative; margin: 0 auto; width: 670rpx;height: 72rpx;background: var(--searchViewBackColor);border-radius: 12rpx;}
.search-box .line{ margin-right: 16rpx; width: 2rpx;height: 30rpx;background: #6B707C;}
.search-box .select{padding: 0 24rpx;}
.search-box .input{padding: 0 16rpx;}
.search-box .uni-input{ padding: 0 12rpx; font-size: 26rpx}
.search-box .btn{width: 116rpx;height: 72rpx;border-radius: 0 12rpx 12rpx 0;background-color: var(--contentSearchTitleColor); color: var(--contentBgImageTitleColor)}
</style>
